<template>
    <div>
        <div class="card">
            <text class="text1">活动预约</text>
            <div class="row" style="align-items: start">
                <img
                    src="https://img.zcool.cn/community/01ffe656f608d532f875a944926334.jpg@3000w_1l_2o_100sh.jpg"
                    style="width: 200px; height: 100px; border-radius: 5px"
                />
                <div style="width: 8px"></div>
                <div style="display: flex; flex-direction: column; flex-grow: 1">
                    <text class="titleText" style="font-size: 12px">
                        商业的
                        [乌卡时代]，我们如何重塑商业价值-WAWARDS金网奖2023年商业计划领航秀峰会
                    </text>
                    <div class="row" style="align-items: start">
                        <img src="@/activityPages/assets/calendar.png" class="icon" />
                        <div style="width: 3px"></div>
                        <text class="subText" style="font-size: 10px">
                            活动时间: 2023-03-01 10：11～2025-03-01 10：11</text
                        >
                    </div>
                    <div class="row" style="align-items: start">
                        <img src="@/activityPages/assets/arcoDesign-location.png" class="icon" />
                        <div style="width: 3px"></div>
                        <text class="subText" style="font-size: 10px"
                            >活动地址: 府城大道505号仁和新城负一楼67号 (麦当劳旁)</text
                        >
                    </div>
                    <div class="row">
                        <MoneyCard :price="100" :coins="100"></MoneyCard>
                        <div style="flex-grow: 1"></div>
                        <text>x2</text>
                    </div>
                    <div class="row" style="align-items: end">
                        <text>到手价 </text
                        ><MoneyCard :price="100" :coins="100" style="scale: 0.8"></MoneyCard>
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 10px"></div>
        <!-- <div class="card">
            <text>订单联系人</text>
            <div style="height: 10px"></div>

            <div class="row" style="width: 100%">
                <text class="text2">姓名:吴叨叨</text>
                <div style="flex-grow: 1"></div>
                <text class="text2">111111111</text>
            </div>
        </div> -->
        <OrderContact></OrderContact>
        <div style="height: 10px"></div>
        <div class="card">
            <text>订单编号:31281284428482149</text>
            <div style="height: 5px"></div>

            <text>下单时间:2022-12-09 13:59:00</text>
            <div style="height: 5px"></div>

            <text>支付方式:微信</text>
            <div style="height: 5px"></div>

            <text>支付时间:2022-12-09 13:59:30</text>
            <div style="height: 5px"></div>

            <text>配送方式:虚拟商品</text>
        </div>
        <div style="height: 10px"></div>
        <!-- <div class="card">
            <div class="row row1">
                <text>商品总金额</text> <MoneyCard :price="1000" :coins="1000"></MoneyCard>
            </div>
            <div class="row row1">
                <text>优惠券</text>
                <text style="font-size: 12px; color: rgba(236, 94, 65, 1)">满100-10</text>
            </div>
            <div class="row row1">
                <text>实际支付</text> <MoneyCard :price="1000" :coins="1000"></MoneyCard>
            </div>
        </div> -->
        <OrderMoney></OrderMoney>
    </div>
</template>

<script setup lang="ts">
import OrderContact from '@/activityPages/components/order-contact.vue'
import OrderMoney from '@/activityPages/components/order-money.vue'
import MoneyCard from '@/activityPages/components/money-card.vue'
</script>

<style scoped>
@import url('@/activityPages/style/card.css');
.text1 {
    color: rgba(102, 102, 102, 1);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;
    font-weight: bold;
    padding-bottom: 5px;
}
.text2 {
    line-height: 14px;
    color: rgba(153, 153, 153, 1);
    font-size: 10px;
    text-align: left;
    font-family: PingFangSC-regular;
}

.row1 {
    justify-content: space-between;
    padding-bottom: 10px;
    width: 100%;
}
</style>